<template>
  <div class="historicalData">
    <div class="dataInfo" v-show="!loading">
      <div>报关单号：<span>{{details.entryId}}</span></div>
      <div>企业名称：<span>{{details.fullName}}</span></div>
      <div>企业级别：<span>{{details.coClass}}</span></div>
    </div>
    <van-tabs type="card" color="#0d4d8b"  v-show="!loading">
      
      <van-tab title="同HS查获">
        <div class="search_info">
            <div class="search_info_label">筛选标签：</div>
            <van-checkbox-group v-model="ieFlagList" direction="horizontal" @change="getHSList">
              <van-checkbox name="I" icon-size="12px" shape="square">进口</van-checkbox>
              <van-checkbox name="E" icon-size="12px" shape="square">出口</van-checkbox>
            </van-checkbox-group>
             <van-checkbox-group v-model="trafModeList" direction="horizontal" @change="getHSList">
                <van-checkbox name="2" icon-size="12px" shape="square">海运</van-checkbox>
                <van-checkbox name="5" icon-size="12px" shape="square">空运</van-checkbox>
             </van-checkbox-group>
              <van-checkbox-group v-model="sourceList" direction="horizontal" @change="getHSList">
                <van-checkbox name="ECIQ" icon-size="12px" shape="square">涉检</van-checkbox>
                <van-checkbox name="NOECIQ" icon-size="12px" shape="square">非涉检</van-checkbox>
             </van-checkbox-group>
        </div>
        <div class="search_info_gname">
          <div class="search_info_label">商品名称：</div>
          <div class="search_info_search">
              <van-search
              v-model="searchInfosearchValue"
              show-action
              shape="round"
              :clearable="false"
              placeholder="请输入商品名称"
              
              
            >
              <template slot="action">
                <div @click="getHSList">查询</div>
              </template>
            </van-search>
          </div>
        </div>
        <template v-if="enqRecentlySeizedVOS1.length>0">
          
          <div v-show="!infoLoading" class="_tabs_one" v-for="(item,i) in enqRecentlySeizedVOS1" :key="i" @click="xiangq(item)">
            <div class="_tabs_one_left">
              <div>
                <span class="_tabs_one_left_span1">HSCode：</span><span style="color:#888">{{item.codeTs}}</span>
              </div>
              <div>
                <span class="_tabs_one_left_span1">商品名称：</span><span style="color:#888;flex:1">{{item.gname}}</span>
              </div>
              <div>
                <span class="_tabs_one_left_span1">报关单号：</span><span style="color:#888">{{item.entryId}}</span>
              </div>
              <div>
                <span class="_tabs_one_left_span1">查验处理结果：</span><span style="color:#888">{{dict[+item.result]}}</span>
              </div>
              <div>
                <span class="_tabs_one_left_span1">进出口标志：</span><span style="color:#888">{{item.ieFlag=='I'?'进口':'出口'}}</span>
              </div>
              <div>
                <span class="_tabs_one_left_span1">布控来源：</span><span style="color:#888">{{item.source=='ECIQ'?'涉检':'非涉检'}}</span>
              </div>
              <div>
                <span class="_tabs_one_left_span1">运输方式：</span><span style="color:#888">{{trafModeDict[item.trafMode]}}</span>
              </div>
            </div>
            <div class="_tabs_one_right" >
              <img src="../../assets/icon/youjiantou.png" alt="">
            </div>
          </div>
          <van-loading
            v-show="infoLoading"
            size="40px"
            color="#0d4d8b"
            vertical
          ></van-loading>
        </template>
        <template v-else>
          <div style="color:#666;font-size:20px;font-weight:600;text-align:center;margin-top:100px">查无数据</div>
        </template>
        
      </van-tab>
      <van-tab title="近期查获">
        <template v-if="enqRecentlySeizedVOS2.length>0">
           <div class="_tabs_two"  v-for="(item,i) in enqRecentlySeizedVOS2" :key="i" @click="xiangq(item)">
            <div class="_tabs_two_left">
              <div>
                <span class="_tabs_two_left_span1">报关单号：</span><span style="color:#888">{{item.entryId}}</span>
              </div>
              <div>
                <span class="_tabs_two_left_span1">查验处理结果：</span><span style="color:#888">{{dict[+item.result]}}</span>
              </div>
              <div>
                <span class="_tabs_two_left_span1">商品名称：</span><span style="color:#888;flex:1">{{item.gname}}</span>
              </div>
            </div>
            <div class="_tabs_two_right" >
            <img src="../../assets/icon/youjiantou.png" alt="">
            </div>
          </div>
        </template>
       
        <template v-else>
          <div style="color:#666;font-size:20px;font-weight:600;text-align:center;margin-top:100px">查无数据</div>
        </template>
      </van-tab>
    </van-tabs>
    <van-loading
      v-show="loading"
      size="40px"
      color="#0d4d8b"
      vertical
    ></van-loading>
  </div>
</template>

<script>
import {encrypt,decrypt} from '@/utils/AES.js'
import {dict,trafModeDict} from '@/utils/data.js'
import {reqEnterpriseSeizureDetails,reqEnterpriseParticulars,reqSameHsCode,reqEnqRecent} from '@/api/index.js'
export default {
  data(){
    return {
      details:{},
      loading:false,
      infoLoading:false,
      enqRecentlySeizedVOS1:[],
      enqRecentlySeizedVOS2:[],
      dict,
      trafModeDict,
      ieFlagList:[],
       trafModeList:[],
       sourceList:[],
      searchInfosearchValue:'',
     
    }
  },
  created(){
    // this.getlist()
    this.getInfo()
    this.getHSList()
    this.getjinqiList()
  },
  methods:{
    async getInfo(){
      this.loading=true
      const val=JSON.parse(decrypt(this.$route.query.eData))
      console.log(val);
      const res=await reqEnterpriseParticulars({
        entryId:val.entryId,
      })
      if(res.code==200){
         this.details=res.data
         this.loading=false
      }else {
         this.details={}
         this.loading=false
      }
    },
    async getHSList(){
      this.infoLoading=true
      // console.log(this.ieFlagList,this.trafModeList,this.sourceList);
      let source
      if(this.sourceList.length>1){
        source=''
      }else {
        source=this.sourceList.join()
      }
       const val=JSON.parse(decrypt(this.$route.query.eData))
      const res=await reqSameHsCode({
         entryId:val.entryId,
          ieFlag:this.ieFlagList.join(),
          trafMode:this.trafModeList.join(),
          source:source,
          gname:this.searchInfosearchValue
      })
      if(res.code==200){
           let a=[]
        
        res.data.forEach(item=>{
         a.push(item)
          
        })


        
        let a1=[]
        a.forEach(item=>{
          item.enqRecentlySeizedVO2S.forEach(i=>{
            return a1.push({
                codeTs:item.codeTs,
                entryId:i.entryId,
                result:i.result,
                manChkNotes:i.manChkNotes,
                checkTime:i.checkTime,
                gname:i.gname,
                ieFlag:i.ieFlag,
                source:i.source,
                trafMode:i.trafMode

            })
          })
        })
        // console.log(a1);
        this.infoLoading=false
        this.enqRecentlySeizedVOS1=a1
      }else {
        this.infoLoading=false
         this.enqRecentlySeizedVOS1=[]
      }
    },
    async getjinqiList(){
      const val=JSON.parse(decrypt(this.$route.query.eData))
      const res=await reqEnqRecent({
        entryId:val.entryId,
      })
      if(res.code==200){
        this.enqRecentlySeizedVOS2=res.data
      }else {
        this.enqRecentlySeizedVOS2=[]
      }
    },
    async getlist(){
      this.loading=true
      // console.log(this.$route);
      const val=JSON.parse(decrypt(this.$route.query.eData))
      const res=await reqEnterpriseSeizureDetails({
        entryId:val.entryId,
        // ieFlag:val.ieFlag,
        customsOfficerNum:this.$store.state.dashboard.customsUserInfo.persionId
      })
      if(res.code==200){
        console.log(res);
        this.loading=false
        // this.details=res.data
        // 处理同hs 近期
        let a=[]
        let b= []
        res.data.enqRecentlySeizedVOS.forEach(item=>{
          item.enqRecentlySeizedVOS1.forEach(item1=>{
            a.push(item1)
          })
          item.enqRecentlySeizedVOS2.forEach(item2=>{
            b.push(item2)
          })
        })


        
        let a1=[]
        a.forEach(item=>{
          item.enqRecentlySeizedVO2S.forEach(i=>{
            return a1.push({
                codeTs:item.codeTs,
                entryId:i.entryId,
                result:i.result,
                manChkNotes:i.manChkNotes,
                checkTime:i.checkTime,
                gname:i.gname
            })
          })
        })
        console.log(a1);
        this.enqRecentlySeizedVOS1=a1



        this.enqRecentlySeizedVOS2=b
        // console.log(a,b);
      }else {
        console.log('error',res);
        this.loading=false
        this.details={}
        this.enqRecentlySeizedVOS1=[]
        this.enqRecentlySeizedVOS2=[]
      }
      
    },
    xiangq(val){
      this.$router.push({
        path:'/customsDeclarationInspectionInfo',
        query:{

          eData:encrypt(JSON.stringify({
            entryId:val.entryId,
            ieFlag:this.details.ieFlag,
            manChkNotes:val.manChkNotes,
            result:val.result,
            checkTime:val.checkTime
          }))
         
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.historicalData {
  padding: 10px 10px 20px 10px;
  .dataInfo {
    margin-left: 10px;
    div {
     font-size: 14px;
     margin: 10px 0;
     span {
      font-size: 14px;
      margin-left: 10px;
      color: #888;
     }
    }
  }
  ::v-deep .van-tabs {
    margin-top: 20px;
    .van-tabs__content {
      margin-top: 20px;
      .van-tab__pane {
        .search_info {
          padding: 0 10px;
          display: flex;
          font-size: 14px;
          .search_info_label {
            font-size: 14px;
            
            // width: 100px;
          }
          .van-checkbox-group {
            flex:1;
            .van-checkbox__label {
              color: #888;

            }
          }
          
        }
        .search_info_gname {
          margin-top: 10px;
           padding: 0 10px;
          display: flex;
          font-size: 14px;
          .search_info_label {
            font-size: 14px;
            
            // width: 100px;
          }
          .search_info_search {
            flex: 1;
            background-color: red;
            // height: 20px;
            .van-search {
              padding: 0;
              .van-search__content {
                border-radius: 2px;
              }
              .van-search__action {
                margin: 0 0px 0 10px;
                width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color:#0d4d8b;
                color:#fff;
                border-radius: 2px;
                font-size: 14px;
              }
            }
          }
        }
        ._tabs_one {
          // border: 1px solid #ccc;
         box-shadow: 0 8px 12px 5px #ebedf0;
          border-radius: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          margin-top: 20px;
          cursor: pointer;
          ._tabs_one_left {
            // width: 60%;
            div {
              
              margin: 10px 0;
              display: flex;
              // justify-content: space-between;
              // align-items: center;
              font-size: 14px;
              ._tabs_one_left_span1 {
                 width: 120px;
              }
            }
          }
          ._tabs_one_right{
            // font-size: 12px;
            // color: #0000FF;
            img {
              width: 20px;
              height: 20px;
            }
          }
        }
        ._tabs_two {
          box-shadow: 0 8px 12px 5px #ebedf0;
          border-radius: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          margin-top: 20px;
          cursor: pointer;
          ._tabs_two_left {
            //  width: 90%;
            div {
              
              margin: 10px 0;
              display: flex;
              // justify-content: space-between;
              // align-items: center;
              font-size: 14px;
              ._tabs_two_left_span1 {
                width: 120px;
              }
            }
          }
          ._tabs_two_right{
             img {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>